<template>
	<!-- 学习计划表习计划表 -->
	<div id="app">
		<!-- 学习计划添加 -->
		<div class="card">
			<!-- 标题区域 -->
			<div class="card-header">学习计划表</div>
			<!-- 提交区域 -->
			<div class="card-body">
				<form @submit.prevent="add">
					<div class="row g-4">
						<!-- 学习科目 -->
						<div class="col-auto">
							<div class="input-group mb-3">
								<span class="input-group-text" id="basic-addon1">学习科目</span>
								<input type="text" class="form-control" placeholder="请输入学习科目" v-model.trim="subject" />
							</div>
						</div>

						<!-- 学习任务 -->
						<div class="col-auto">
							<div class="input-group mb-3">
								<span class="input-group-text" id="basic-addon1">学习内容</span>
								<textarea class="form-control" v-model.trim="content" placeholder="请输入学习内容"
									:style="{ height: '32px' }"></textarea>
							</div>
						</div>

						<!-- 学习地点 -->
						<div class="col-auto">
							<div class="input-group mb-3">
								<span class="input-group-text" id="basic-addon1">学习地点</span>
								<select class="form-select form-select-sm" v-model="selectedOption">
									<option v-for="(item,i) in options" :value="item.place" :key="i">{{ item.place }}
									</option>
								</select>
							</div>
						</div>
						<!-- 添加按钮 -->
						<div class="col-auto">
							<button type="submit" class="btn btn-primary">添加</button>
						</div>
					</div>
				</form>
			</div>
		</div>

		<table class="table table-striped table-hover table-bordered">
			<thead>
				<tr>
					<th scope="col">序号</th>
					<th scope="col">学习科目</th>
					<th scope="col">学习内容</th>
					<th scope="col">学习地点</th>
					<th scope="col">完成状态</th>
					<th scope="col">操作</th>
				</tr>
			</thead>
			<tbody>
				<!-- 学习计划列表渲染 -->
				<tr v-for="(item,i) in list" :key="i">
					<td>{{ item.id }}</td>
					<td>{{ item.subject }}</td>
					<td>{{ item.content }}</td>
					<td>{{ item.place }}</td>
					<!-- 是否已完成 -->
					<td>
						<div class="form-check form-switch">
							<input class="form-check-input" type="checkbox" role="switch" v-model="item.status"
								:id="'cb' + item.id" />
							<label class="form-check-label" :for="'cb' + item.id">{{item.status ? '已完成' : '未完成' }}</label>
						</div>
					</td>
					<td>
						<a href="javascript:;" @click="remove(item)">删除</a>
					</td>
				</tr>
			</tbody>
		</table>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				subject: '', //学习科目 
				content: '', //学习内容 
				// 3 let nextId = ref('') 
				selectedOption: '自习室', //学习地点 

				// 供选择的学习地方
				options: [
					{ placeCode: 0, place: '自习室' },
					{ placeCode: 1, place: '图书馆' },
					{ placeCode: 2, place: '宿舍' },
				],

				// 学习计划列表数据
				list: [{
						id: '1',
						subject: 'Vue.js前端实战开发',
						content: '学习指令，例如v-if、v-for、v-model等',
						place: '自习室',
						status: false,
					},
					{
						id: '2',
						subject: 'SpringBoot实战开发',
						content: '过滤器、拦截器等',
						place: '机房',
						status: false,
					},
					{
						id: '3',
						subject: 'SpringBoot实战开发3333',
						content: '过滤器、拦截器等3333',
						place: '机房',
						status: false,
					},
				]
			}
		},
		methods: {
			remove(item) {
				if (item.status) {
					this.list = this.list.filter(one => one.id !== item.id)
				} else {
					alert('请完成该学习计划后再进行删除操作！')
				}
			},

			// 添加方法
			add() {
				// 学习科目不能为空
				if (this.subject === '') {
					alert('学习科目为必填项！')
					return
				}

				// 生成学习计划记录的id值,数组中最大id值+1
				let nextId = Math.max(...this.list.map(item => item.id)) + 1
				// 学习计划表添加记录
				this.list.push({
					id: nextId,
					subject: this.subject,
					content: this.content,
					place: this.selectedOption,
					status: false,
				})
				// 变量重置初始值
				this.subject = ''
				this.content = ''
				this.selectedOption = '自习室'
			},
		},
	}
</script>

<style>
</style>